<template>
  <div>
    <div>
      <a-button type="primary" @click="addBtnClkFn">添加</a-button>
    </div>

    <div class="table">
      <a-table rowKey="id" :columns="eduExperienceColumns" :data-source="eduExperienceData">
        <template v-for="col in eduExperienceColumns" :slot="col.dataIndex" slot-scope="text, record">
          <div :key="col.dataIndex">
            <a-input v-if="record.editable && (col.dataIndex == 'school' || col.dataIndex == 'major')" style="margin: -5px 0" :value="text" @change="e => handleChange(e.target.value, record.key, col.dataIndex)"></a-input>
            <a-date-picker style="width: 200px;" @change="(date, dateString) => dateOnChange(dateString, record.key, col.dataIndex)" v-else-if="record.editable && (col.dataIndex == 'beginDate' || col.dataIndex == 'endDate')" :default-value="moment(text, dateFormat)" />
            <template v-else>{{text}}</template>
          </div>
        </template>
        <span slot="opera" slot-scope="text, record">
          <div class="editable-row-operations">
            <span v-if="record.editable">
              <a @click="() => save(record.key)">保存</a>
              <a-popconfirm title="确定取消?" @confirm="() => cancel(record.key)">
                <a>取消</a>
              </a-popconfirm>
            </span>
            <span v-else>
              <a :disabled="editingKey !== ''" @click="() => edit(record.key)">编辑</a>
            </span>
          </div>
        </span>
      </a-table>
    </div>

    <!-- modal -->
    <a-modal title="新增教育经历" centered :visible="modalShow" @ok="handleOk" @cancel="handleCancel">
      <a-form-model :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-form-model-item label="学校名称">
          <a-input v-model="form.school" placeholder="请输入学校名称" allow-clear />
        </a-form-model-item>
        <a-form-model-item label="所学专业">
          <a-input v-model="form.major" placeholder="请输入所学专业" allow-clear />
        </a-form-model-item>
        <a-form-model-item label="入学时间">
          <a-date-picker :style="setWidth" @change="goSchoolDateOnChange" placeholder="请选择入学时间" />
        </a-form-model-item>
        <a-form-model-item label="毕业时间">
          <a-date-picker :style="setWidth" @change="graduateDateOnChange" placeholder="请选择毕业时间" />
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>

<script>
import datas from '../../../utils/data'
import moment from 'moment'

export default {
  name: "tabs4",
  props: {
    eduHistoryList: Array
  },
  data () {
    this.cacheData = this.eduHistoryList.map(item => ({ ...item }));
    return {
      eduExperienceColumns: datas.eduExperienceColumns,
      eduExperienceData: this.eduHistoryList,
      editingKey: '',
      dateFormat: 'YYYY/MM/DD',
      modalShow: false,
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      form: {
        name: ''
      },
      setWidth: 'width: 276px'
    }
  },
  methods: {
    moment,
    handleChange (value, key, column) {
      const newData = [...this.eduExperienceData];
      const target = newData.filter(item => key === item.key)[0];
      if (target) {
        target[column] = value;
        this.eduExperienceData = newData;
      }
    },
    dateOnChange (dateString, key, column) {
      const newData = [...this.eduExperienceData];
      const target = newData.filter(item => key === item.key)[0];
      if (target) {
        target[column] = dateString;
        this.eduExperienceData = newData;
      }
    },
    edit (key) {
      const newData = [...this.eduExperienceData];
      const target = newData.filter(item => key === item.key)[0];
      this.editingKey = key;
      if (target) {
        target.editable = true;
        this.eduExperienceData = newData;
      }
    },
    save (key) {
      const newData = [...this.eduExperienceData];
      const newCacheData = [...this.cacheData];
      const target = newData.filter(item => key === item.key)[0];
      const targetCache = newCacheData.filter(item => key === item.key)[0];
      if (target && targetCache) {
        delete target.editable;
        this.eduExperienceData = newData;
        Object.assign(targetCache, target);
        this.cacheData = newCacheData;
      }
      this.editingKey = '';
    },
    cancel (key) {
      const newData = [...this.eduExperienceData];
      const target = newData.filter(item => key === item.key)[0];
      this.editingKey = '';
      if (target) {
        Object.assign(target, this.cacheData.filter(item => key === item.key)[0]);
        delete target.editable;
        this.eduExperienceData = newData;
      }
    },
    addBtnClkFn () {
      this.modalShow = true
    },
    handleOk () {
      setTimeout(() => {
        this.modalShow = false;
      }, 2000);
    },
    handleCancel () {
      this.modalShow = false;
    },
    goSchoolDateOnChange (dateString) {
      console.log(dateString)
    },
    graduateDateOnChange (dateString) {
      console.log(dateString)
    }
  }
};
</script>

<style scoped leng="less">
.table {
  margin: 20px 0 0;
}
.editable-row-operations a {
  margin-right: 8px;
}
</style>